<template>
  <!-- 这里是使用短信登录 -->
  <view class="login-page">
    <view class="login-container">
      <view class="login-title">
        短信登录
      </view>
      <view class="input-group">
        <input class="input-field" v-model="phone" maxlength="11" placeholder="+86 请输入手机号码" @blur="validPhone"/>
        <view class="code">
          <input name="code" v-model="code" maxlength="6" placeholder="请输入验证码"/>
          <text class="get-code" @click="sendCode()">{{ codeMsg }}</text>
        </view>
      </view>

      <view class="button-container" @click="login2()">
        <text class="next-step">下一步</text>
      </view>
      <text class="verification-hint">收不到验证码？</text>
      <view class="agreement-section">
        <view class="agreement" @click="checkeAccept = !checkeAccept">
          <uni-icons v-if="!checkeAccept" type="circle"></uni-icons>
          <uni-icons v-if="checkeAccept" color="red" type="checkbox-filled"></uni-icons>
          <text class="text">已阅读并同意</text>
        </view>
        <text class="link" @click="showArctile()">《用户协议》和《隐私政策》</text>
      </view>
    </view>
  </view>
</template>

<script>
import {_loginenter} from '@/service/user.js';
import {_logincode} from '@/service/user.js';
import UniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import {mapState, mapMutations} from 'vuex';
import {_sendChartInitData} from "@/service/exper_api";

export default {
  components: {UniIcons},
  data() {
    return {
      phone: '',
      code: '',
      checkeAccept: false,
      codeMsg: '获取验证码',
      judgecode: '',
      isCounting: false,
      timeRemaining: 60
    };
  },
  methods: {
    ...mapMutations(['login']),
    //确认是否授权
    judgeAgree() {
      if (!this.checkeAccept) {
        this.$api.msg('请先确认授权');
        return false;
      }
      return true;
    },
    // 验证手机号码
    validPhone() {
      let valid = false;
      let rule = /^1[3456789]\d{9}$/;
      if (this.phone === '') {
        this.$api.msg('手机号码不能为空');
      } else if (!rule.test(this.phone)) {
        this.$api.msg('请输入正确的手机号码');
      } else {
        valid = true;
      }
      return valid;
    },
    // 验证是否为空
    validIsEmpty() {
      if (this.code === '') {
        this.$api.msg(`验证码不能为空`);
        return false;
      }
      return true;
    },
    //验证码是否正确
    async validIsTrue() {
      let resultData;
      try {
        resultData = await _loginenter({
          account_user: this.phone,
          verifyCode: this.code,
        });
        // console.log(resultData)
      } catch (error) {
        throw error; //抛出异常
      }
      if (resultData === undefined || resultData.status !== 200) {
        throw new Error("接口返回异常，位置login2.vue : validIsTrue");
      }
      if (resultData.message !== "验证码正确") {
        this.$api.msg(resultData.message);
        throw new Error("登陆失败");
      }
      return resultData.data;
    },
    async login2() {
      if (this.judgeAgree()) {
        if (this.validPhone() && this.validIsEmpty()) {
          this.validIsTrue().then(res => {
            console.log(res)
            this.login({
              name: res.name_user,
              nickname: res.nickname_user,
              accountNum: res.account_user,
              password: res.password_user,
              gender: res.gender_user,
              headPhoto: res.photo_user,
              registerTime: res.registertime_user,
            });
            uni.switchTab({
              url: '/pages/index1/index1'
            })
          }).catch(error => {
            console.log(error)
          })
        }
      }

    },
    //倒计时
    timewait() {
      this.isCounting = true;
      this.codeMsg = this.timeRemaining + '秒后重新获取'; // 更新提示信息
      const countdown = setInterval(() => {
        this.timeRemaining--;
        this.codeMsg = this.timeRemaining + '秒后重新获取'; // 更新剩余时间提示

        if (this.timeRemaining <= 0) {
          clearInterval(countdown); // 清除计时器
          this.codeMsg = '获取验证码'; // 恢复按钮提示
          this.isCounting = false; // 倒计时结束
          this.timeRemaining = 60;
        }
      }, 1000);
    },
    //发送验证码
    async sendCode() {
      //验证手机号码是否合法
      if (!this.validPhone() || this.isCounting) {
        return;// 如果手机号不对或正在倒计时则不执行
      }
      this.timewait()
      let res = await _logincode({
        account_user: this.phone,
      })
      this.$api.msg(res.message)
      console.log(res)

    },

    showArctile() {
      uni.navigateTo({
        url: '/pages/agreement/agreement'
      })
    }
  }
}

</script>

<style scoped lang="scss">
.login-page {
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}

.login-container {
  width: 100%;
  height: 100%;
  padding: 10% 7.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-title {
  margin-bottom: 50rpx;
  font-size: 50rpx;
  font-weight: bold;
  color: #333;
  margin-top: 80rpx;
  text-align: center;
}


.button-container {
  width: 100%;
  padding: 30rpx 0;
  background-color: #138f87;
  border-radius: 55rpx;
  text-align: center;
  margin-top: 100rpx;

  .next-step {
    color: #ffffff;
    font-size: 37.5rpx;
    line-height: 33rpx;
  }

  &:active {
    background-color: #0e8383;
  }
}


.verification-hint {
  margin-top: 85rpx;
  color: #a6a6a6;
  font-size: 35rpx;
  text-align: center;
}

.input-group {
  width: 100%;
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  .input-field {
    width: 100%;
    padding: 20rpx 0 20rpx;
    margin-top: 80rpx;
    color: #7a7777;
    border-bottom: solid #138f8780;
    font-size: 37.5rpx;
  }


  .code {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 80rpx;
    padding: 20rpx 0 20rpx;
    border-bottom: solid #138f8780;

    .get-code {
      color: #138f87;
      cursor: pointer;
    }

    input {
      width: 100%;
      color: #7a7777;
      font-size: 37.5rpx;
    }
  }
}

.agreement-section {
  margin-top: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25rpx;

  .agreement {
    display: flex;
    align-items: center;
    padding: 20rpx;
    color: #333232;

    .text {
      margin-left: 20rpx;
    }
  }

  .link {
    color: #0B97C4;
  }
}
</style>
